<template>
    <div class="region">
        <div class="content">
            <div class="left">地区:</div>
            <ul>
                <li :class="{ active: activeFlag == '' }" @click="changeRegion('')">全部</li>
                <li v-for="region in regionArr" :key="region.value" :class="{ active: activeFlag == region.value }"
                    @click="changeRegion(region.value)">{{ region.name}}</li>
            </ul>
        </div>
    </div>
</template>

<script setup lang='ts' name="Name">
import { reqHospitalLevelAndRegion } from "@/api/home"
import { onMounted, ref } from "vue";
//存储地区的数据
let regionArr = ref<any>([])
//控制医院地区高亮响应式数据
let activeFlag = ref<string>('')
//挂载完毕获取地区的数据
onMounted(() => {
    getRegion();
});
//获取地区的数据
const getRegion = async () => {
    let result = await reqHospitalLevelAndRegion("Beijin")
    if (result.data.code === 200) {
        regionArr.value = result.data.data
    }
}
//点击地区的按钮回调

const changeRegion = (region: string) => {
    activeFlag.value = region
    //触发自定义事件：将医院地区的参数回传给父组件
    $emit('getRegion',region);
}
let $emit = defineEmits(['getRegion'])
</script>

<style scoped lang="scss">
.region {
    color: #7f7f7f;
    margin-top: 10px;

    .content {
        display: flex;

        .left {
            margin-right: 10px;
            width: 55px;
        }

        ul {
            display: flex;
            flex-wrap: wrap;

            li {
                margin-right: 10px;
                margin-bottom: 10px;

                &.active {
                    color: #55a6fe;
                }
            }

            li:hover {
                color: #55a6fe;
                cursor: pointer;
            }
        }
    }
}
</style>